<template>
    <van-popup v-model:show="showVideo" teleport="body" :closeable="false" position="center"
      :style="{ height: '100%', width: '100%' }">
      <i class="iconfont icon-fanhui icon_back" @click.stop="showVideo = false" name="arrow-left">
      </i>
      <div class="pop_box">
        <div v-if="showVideo" class="preview-cover">
          <video ref="videoRef" poster="../assets/images/black.png" :autoplay="false" class="video"
            :src="url" controls></video>
        </div>
      </div>
    </van-popup>
</template>
<script setup>
import { ref, reactive,watch, onMounted, computed,nextTick  } from "vue";
import { useI18n } from "vue-i18n";
const emit = defineEmits(["change", "update:modelValue"]);
const { locale, t } = useI18n();
const show = ref(false)
const images = ref([])
const startPosition = ref(0)
const videoRef = ref()
const previewImg = ref()
const props = defineProps({
    modelValue: {
    type: Boolean,
    default: false,
  },
  url: {
    type: String,
    default: ''
  },
})
let showVideo = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
watch(showVideo,async (n,o) =>{
    if(n){
        await nextTick()
        videoRef.value.play()
    }
})

// 初始化
const main = async () => {
};
main()
</script>
<style lang="scss" scoped>
.van-popup {
  width: 100%;
  max-width:100% !important;
}
.icon_back {
  color: #fff;
  position: fixed;
  top: 10px;
  font-size: 20px;
  left: 10px;
  z-index: 1;
}

.pop_box {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: #000;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep .van-image-preview__overlay {
  background: #000;
}

.pictures-adaptive {
  display: flex;
  flex-wrap: wrap;
}

.border_radius {
  canvas {
    border-radius: 50%;
  }
}

/* 相对定位，img相对于.wrap相对定位 */
.wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 2%;
  width: 33%;
  padding-bottom: 33%;
}

.video_controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  width: 40px;
  fill: currentColor;
  color: #fff;
  opacity: 0.8;
}

.wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrap video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.iconActive {
  color: $primary-color;
}

.preview-cover {
  box-sizing: border-box;
  width: 100%;
  text-align: center;

  .video {
    height: 100%;
    width: 100%;
  }
}

/* 大于1张图片时，img标签的样式 */
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  2张图片  */
.wrap:nth-child(1):nth-last-child(2),
.wrap:nth-child(2):nth-last-child(1),
/*  4张图片  */
.wrap:nth-child(1):nth-last-child(4),
.wrap:nth-child(2):nth-last-child(3),
.wrap:nth-child(3):nth-last-child(2),
.wrap:nth-child(4):nth-last-child(1) {
  width: 33%;
  padding-bottom: 33%;
}


/* 每行的两张图片中间间隔2%的宽度 */
/*  2张图片  */
.wrap:nth-child(2):nth-last-child(1),
/*  4张图片  */
.wrap:nth-child(2):nth-last-child(3),
.wrap:nth-child(4):nth-last-child(1) {
  margin-left: 2%;
}


/*  3张图片  */
.wrap:nth-child(1):nth-last-child(3),
.wrap:nth-child(2):nth-last-child(2),
.wrap:nth-child(3):nth-last-child(1) {
  width: 32%;
  padding-bottom: 32%;
}

/*  间隔  */
.wrap:nth-child(2):nth-last-child(2),
.wrap:nth-child(3):nth-last-child(1) {
  margin-left: 2%;
}

/*  5张以上图片  */
.wrap:nth-child(n + 5),
.wrap:nth-child(1):nth-last-child(n + 5),
.wrap:nth-child(1):nth-last-child(n + 5)~.wrap {
  width: 32%;
  padding-bottom: 32%;
}

/*  间隔  */
.wrap:nth-child(n + 5):not(:nth-child(3n + 1)),
.wrap:nth-child(1):nth-last-child(n + 5)~.wrap:not(:nth-child(3n + 1)) {
  margin-left: 2%;
}

.oneImg {
  // height: 210px;
}

.item_box {
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 6px;

  .item_title_box {
    display: flex;
    align-items: center;

    .attentionBtn {
      background: $primary-color;
      height: 20px;
      color: #fff;
      border-radius: 20px;
      font-size: 10px;
    }

    .item_title_icon {}

    .item_title_name {
      font-size: 11px;
      flex: 1;
      margin-left: 6px;
    }

    .item_title_btn {}
  }

  .item_word {
    margin: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -webkit-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    color: #727272;
    font-size: 0.34rem;
    line-height: 0.5rem;
    white-space: pre-wrap;
  }

  .item_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item_time {
      color: #acacac;
      font-size: 10px;
    }

    .item_footer_right {
      display: flex;
      align-items: center;
      color: #acacac;

      .icon_item {
        display: flex;
        align-items: center;
        margin-left: 8px;

        .item_num {
          margin-left: 4px;
        }

        .icon_no {
          font-size: 14px;
        }
      }
    }
  }
}
</style>